<template>
  <div>
    <el-row class="padding-sm">
      <el-col :span="24"
        ><div class="flex-between items-center">
          <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
          </el-breadcrumb> -->
          <div class="flex">
            <el-select
              v-model="select_Search"
              slot="prepend"
              size="small"
              placeholder="请选择"
            >
              <el-option label="小吃" value="1"></el-option>
              <el-option label="饮料" value="2"></el-option>
              <el-option label="牛排" value="3"></el-option>
              <el-option label="披萨" value="4"></el-option>
            </el-select>
            <el-button
              slot="append"
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="Search_contents"
            ></el-button>
          </div>
          <el-badge :value="2" class="item" type="warning">
            <el-button type="primary" size="small" plain>
              刷新订单
            </el-button>
          </el-badge>
        </div></el-col
      >
    </el-row>
    <el-table :data="tabSopp" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
            label-position="left"
            inline
            class="showTable"
            label-width="100px"
          >
            <el-form-item label="商品名称">
              <span>{{ props.row.Listname }}</span>
            </el-form-item>
            <!-- <el-form-item label="商品图片">
              <img
                :src="props.row.ListImage"
                alt=""
                srcset=""
                style="width: 60px; height: 60px"
              />
              <span>{{ props.row.shop }}</span>
            </el-form-item> -->
            <el-form-item label="商品 ID">
              <span>{{ props.row.ListId }}</span>
            </el-form-item>
            <el-form-item label="酱料/规格">
              <span>{{ props.row.chilid[0].Sauce.heijiao }}酱</span>
              <span>-----</span>
              <span>{{ props.row.chilid[0].Raw_cooked.seven }}分熟</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="交易时间" prop="Listname"> </el-table-column>
      <el-table-column label="桌号" prop="Original_price"> </el-table-column>
      <el-table-column label="用餐人数" prop="Current_price"></el-table-column>
      <el-table-column label="详情" prop="Monthly_sales"></el-table-column>
      <el-table-column
        label="交易金额(元)"
        prop="Monthly_sales"
        sortable
      ></el-table-column>
      <el-table-column align="right" label="交易状态">
        <template slot-scope="scopes">
          <el-button size="mini" type="info" plain @click="setList(scopes.row)">
            待接单</el-button
          >
          <el-button
            size="mini"
            type="success"
            plain
            @click="DeleteList(scopes.row)"
            >已结账</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import { filter } from "vue/types/umd";
import shop from "../../assets/json/shopping.json";
export default {
  data() {
    return {
      tabSopp: [],
      // 搜索内容
      select_Search: "",
    };
  },
  created() {
    // console.log("shop", shop.data[0].classChild);
    this.tabSopp = shop.data[0].classChild;
  },
  methods: {
    // 待接单
    setList(index) {
      console.log("点击成功了！", index.ListId);
    },
    // 状态
    DeleteList(index) {
      console.log("订单状态:", index);
    },
    // 搜索商品
    Search_contents() {
      console.log("搜索内容:", this.select_Search);
    },
  },
};
</script>

<style lang="less" scoped>
.showTable {
  width: 90%;
  margin: 0 auto;
  .el-form-item {
    margin-bottom: 0;
    display: block;
    .el-form-item__label {
      font-weight: 600;
    }
  }
}
</style>